import Picker from 'better-picker';

/*
 * domId：点击触发的dom id
 * dataSource：树级数据源 格式：var dataSource = [ { "name": "海南", "sub": [ { "name": "海口", "sub": [ { "name": "龙华区" }, { "name": "秀英区" }, { "name": "琼山区" }, { "name": "美兰区" }, { "name": "其他" } ], "type": 0 } ], "type": 1 } ];
 * origin：默认选中的数组
 * callback：回调函数，毁掉传参为选中的数组对象
 * */

export default function(domId,dataSource,origin=null,callback){
	var nameEl = document.getElementById(domId);
	
	var first = []; 
	var second = []; 
	var third = []; 
	
	var selectedIndex = origin||[0, 0, 0]; /* 默认选中的 */
	var checked = origin||[0, 0, 0]; /* 已选选项 */
	
	function creatList(obj, list){
	  obj.forEach(function(item, index, arr){
	  var temp = new Object();
	  temp.text = item.name;
	  temp.value = index;
	  temp.id = item.id;
	  list.push(temp);
	  })
	}
	
	creatList(dataSource, first);
	
	if (dataSource[selectedIndex[0]].hasOwnProperty('sub')) {
	  creatList(dataSource[selectedIndex[0]].sub, second);
	} else {
	  second = [{text: '', value: 0}];
	}
	
	if (dataSource[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
	  creatList(dataSource[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
	} else {
	  third = [{text: '', value: 0}];
	}
	
	var picker = new Picker({
		data: [first, second, third],
	  selectedIndex: selectedIndex,
		title: '地址选择'
	});
	
	picker.on('picker.select', function (selectedVal, selectedIndex) {
//	  var text1 = first[selectedIndex[0]].text;
//	  var text2 = second[selectedIndex[1]].text;
//	  var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
	  callback([
	  	first[selectedIndex[0]],
	  	second[selectedIndex[1]],
	  	third[selectedIndex[2]]
	  ])
	});
	
	picker.on('picker.change', function (index, selectedIndex) {
	  if (index === 0){
	    firstChange();
	  } else if (index === 1) {
	    secondChange();
	  }
	
	  function firstChange() {
	    second = [];
	    third = [];
	    checked[0] = selectedIndex;
	    var firstCity = dataSource[selectedIndex];
	    if (firstCity.hasOwnProperty('sub')) {
	      creatList(firstCity.sub, second);
	
	      var secondCity = dataSource[selectedIndex].sub[0]
	      if (secondCity.hasOwnProperty('sub')) {
	        creatList(secondCity.sub, third);
	      } else {
	        third = [{text: '', value: 0}];
	        checked[2] = 0;
	      }
	    } else {
	      second = [{text: '', value: 0}];
	      third = [{text: '', value: 0}];
	      checked[1] = 0;
	      checked[2] = 0;
	    }
	
	    picker.refillColumn(1, second);
	    picker.refillColumn(2, third);
	    picker.scrollColumn(1, 0)
	    picker.scrollColumn(2, 0)
	  }
	
	  function secondChange() {
	    third = [];
	    checked[1] = selectedIndex;
	    var first_index = checked[0];
	    if (dataSource[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
	      var secondCity = dataSource[first_index].sub[selectedIndex];
	      creatList(secondCity.sub, third);
	      picker.refillColumn(2, third);
	      picker.scrollColumn(2, 0)
	    } else {
	      third = [{text: '', value: 0}];
	      checked[2] = 0;
	      picker.refillColumn(2, third);
	      picker.scrollColumn(2, 0)
	    }
	  }
	
	});
	
	/*picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
	  console.log(selectedVal);
	  console.log(selectedIndex);
	  console.log(third[selectedIndex[2]]);
	});*/
	
	nameEl.addEventListener('click', function () {
		picker.show();
	});



}